import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
  createMemoryHistory,
} from "vue-router";
// 引入创建好的页面
import GoodsView from "../pages/goods/GoodsView.vue";
import LoginView from "../pages/login/LoginView.vue";
import Error404 from "../pages/Error404.vue";
import OrderTotal from "../pages/sales/OrderTotal.vue";
import SalesTotal from "../pages/sales/SalesTotal.vue";
import { KeepAlive, reactive } from "vue";
// 路由配置数组
const routes = [
  // 重定向：地址栏访问的a页面，会自动跳转到指定页面，这个就是重定向
  // {
  //   path: "/",
  //   redirect: "/login",
  // },
  // 404页面
  {
    path: "/:pathMatch(.*)*",
    component: Error404,
  },
  {
    path: "/login",
    component: LoginView,
    meta: { title: "登录页面", auth: false, KeepAlive: true },
  },
  {
    path: "/goods",
    component: GoodsView,
    meta: { title: "商品页面", auth: true, KeepAlive: true },
    // 重定向
    redirect: "/goods/list",
    // 嵌套路由
    children: [
      {
        path: "/goods/list",
        // 路由懒加载
        component: () => import("../pages/goods/GoodsList.vue"),
      },
      {
        path: "/goods/type",
        // 路由懒加载
        component: () => import("../pages/goods/GoodsType.vue"),
      },
      {
        path: "/goods/add",
        // 路由懒加载
        component: () => import("../pages/goods/GoodsAdd.vue"),
      },
    ],
  },

  // query传参配置s
  // {
  //   // 根路径
  //   path: "/login",
  //   // 组件名
  //   component: LoginView,
  // },
  // {
  //   // 根路径
  //   path: "/goods",
  //   // 组件名
  //   component: GoodsView,
  // },
  // // params传参配置
  // {
  //   name: "goods",
  //   // 根路径
  //   path: "/goods/:id",
  //   // 组件名
  //   component: GoodsView,
  // },
];

const dynamicRoutes = [
  {
    path: "/order",
    meta: { role: ["super"] },
    component: () => import("../pages/sales/OrderTotal.vue"),
  },
  {
    path: "/sales",
    meta: { role: ["super"] },
    component: () => import("../pages/sales/SalesTotal.vue"),
  },
];

const router = createRouter({
  // 路由模式，hash模式，history模式，memory模式
  // createWebHashHistory
  // createRouter
  // createMemoryHistory
  history: createWebHashHistory(),
  // 路由中url和组件一一对应映射的数组
  routes,
});
// addRoute方法把路由添加到路由实例中
dynamicRoutes.forEach((item) => {
  if (item.meta.role.includes("6")) {
    router.addRoute(item);
  }
});

// 全局前置路由守卫：页面跳转完成前做一些事情，比如控制页面是否能够跳转、重定向
router.beforeEach((to, from, next) => {
  document.title = to?.meta?.title;

  // to去哪里
  // console.log(to);

  // from从哪里来
  // console.log(from);

  // next放行，可以传参，传入的参数为路由配置中的path，代表条咋混到指定的路径
  // 不传入参数就代表直接放行
  // console.log(next);
  next();

  // 路由拦截
  // 如果用户登陆了，就会获取到一个token，此时可以利用token来判断用户是否登录，进而限制页面的跳转
  // if(已经登录，有token值){
  //   if(跳转的是登录页){
  //     next(强制跳转到首页)
  //   }else{
  //     next()//放行
  //   }
  // }else{
  //   // 没有登录

  //   next('/login')
  // }
});

// 全局后置守卫:在页面跳转完成后做一些事情
router.afterEach((to, from) => {
  console.log(to);
  console.log(from);
});

// 实际使用到两个全局守卫的场景：页面跳转完成前打开loading，跳转完成后关闭loading

export default router;
// 路由跳转
// 1.router路由的的push方法和replace方法实现路由跳转，但是push方法可以返回上一页replace方法是直接替换历史记录的，无法实现返回上一页
// 2.使用路由实例的back方法可以实现返回上一页，使用路由实例的go方法传入一个整数可以实现跳转n个页面，n为-1就代码上一页

// 路由传参
// (编程式路由传参：使用js实现路由跳转)
// (声明式路由传参：使用routerLink标签来啊实现页面跳转，也可以使用query和params进行传参，情况和下面一样)
// (props传参)
// 在实际项目中路由通常是用来实现页面跳转的，页面跳转通常要传递一些数据到目标页面，为了满足这种情况，路由跳转的时候就要传参数
// 1.query传参：查询字符串传参，path+query搭配使用，参数拼接在url后面类似于get请求，刷新页面数据不会丢失
// 2.params传参：动态路由传参，name+params搭配使用，要在路由配置path路径后面加要接受的参数，比如path：'/goods/:id/:age',更安全一些，（xue2中不配置path，可以接受到参数，但是页面刷新后数据会丢失）

// 重定向
// 用户访问一个路径，自动跳转到另一个路径，比如访问根路径重定向到首页
// 404页面：用户在地址栏输入url有误或者路由不存在，此时一般会匹配一个04页面，提示用户操作

// 路由模式：
// 1.hash模式：也叫哈希模式，纯前端实现，底层监听了onhashchange事件，局部刷新，很丑
// 2.history模式：历史模式，需要后端支持，底层使用了HTML5中的history api：pushState和replaceState。局部刷新，好看一些
// 3.memory模式:内存模式，主要用于node端，页面的渲染不会反映在url上，了解

// 路由元次那次，如果需要一些数据，这些数据也在每个页面肯定也不同，也就是强关联，此时可以利用路由的元信息配置项来实现功能相关功能，否则使用就使用if/exlse
